import React from 'react'
import '../../assets/css/home/home.less'
import {withRouter} from 'react-router-dom'
import {WingBlank, Carousel} from 'antd-mobile'
import connect from "react-redux/es/connect/connect";

class HomeComponents extends React.Component {
    constructor(props){
        console.log(props.state.login);
        super(props)
        this.state={
            imgList:[],
            nav:[],
            goods:[],
            recom:[],
            bg:'',
        }
    }
    componentWillMount() {
        window.addEventListener('scroll', this.handleScroll,true);
    }

    componentDidMount() {
        this.getData()
        this.getNav()
        this.getGoods()
        this.getReccom()

    }
    componentWillUnmount() {
        //移除
        window.removeEventListener('scroll',this.handleScroll,true);
    }

    getData() {
        fetch(
            'http://vueshop.glbuys.com/api/home/index/slide?token=1ec949a15fb709370f'
        )
            .then((res) => {
                return res.json()
            })
            .then((res) => {
                if (res.code === 200) {
                    this.setState({imgList: res.data}, () => {
                        // console.log(res)
                    })
                }
            })
    }

    getNav() {
        fetch(
            'http://vueshop.glbuys.com/api/home/index/nav?token=1ec949a15fb709370f'
        )
            .then((res) => {
                return res.json()
            })
            .then((res) => {
                if (res.code === 200) {
                    console.log(res);
                    this.setState({ nav: res.data })
                }
            })

    }

    getGoods() {
        fetch(
            'http://vueshop.glbuys.com/api/home/index/goodsLevel?token=1ec949a15fb709370f'
        )
            .then((res) => {
                return res.json()
            })
            .then((res) => {
                if (res.code === 200) {
                    this.setState({ goods: res.data },()=>{

                    })
                }
            })

    }

    getReccom() {
        fetch(
            'http://vueshop.glbuys.com/api/home/index/recom?token=1ec949a15fb709370f'
        )
            .then((res) => {
                return res.json()
            })
            .then((res) => {
                if (res.code === 200) {
                    this.setState({ recom: res.data }, () => {
                        console.log(res)
                    })
                }
            })
    }

    handleScroll=(e)=>{
        let scrollTop = e.target.scrollTop;
        if(scrollTop>150){
            this.setState({
                bg:'linear-gradient(rgba(237,40,53,.9),rgba(255,255,255,.5))'
            })
        }else{
            this.setState({
                bg: 'transparent'
            })
        }

    }

    setPath(path,index){
        this.props.history.push({
            pathname:path,
            query:{
                id:index
            }
        })
    }

    render() {
        return (
            <div id='home'>
                <div className='header' style={{background:this.state.bg}}>
                    <div onClick={this.setPath.bind(this,'/home/classify','492')}>
                        <img src="/images/common/class.png" alt=""/>
                    </div>
                    <div>
                        <img src="/images/common/search.png" alt=""/>
                        <input
                            onClick={this.setPath.bind(this,'/home/classify','492')}
                            type="text" placeholder='请输入宝贝名称'/>
                    </div>
                    <div className='header-login'>
                        {this.props.state.login==='false'?
                        <p
                            onClick={this.setPath.bind(this,'/login',null)}
                        >登录</p>: <img
                                onClick={()=>{
                                    // localStorage.setItem('selectedTab', JSON.stringify('profile'))
                                    // this.props.history.replace('/')
                                }

                                } src="/images/home/index/my.png" alt=""/>
                        }
                    </div>
                </div>
                <div className='swiper'>
                    <WingBlank style={{width: '100%', padding: '0px', margin: '0px'}}>
                        <Carousel
                            autoplayInterval={1000}
                            autoplay={true}
                            infinite={true}
                            // dots = {true}
                            beforeChange={(from, to) =>{

                            }

                            }
                            // afterChange={}
                        >
                            {this.state.imgList.map((item, index) => (
                                <img
                                    key={index}
                                    src={item.image}
                                    alt=""
                                    style={{width: '100%', verticalAlign: 'top', height: 200}}
                                    onLoad={() => {

                                    }}
                                />
                            ))}
                        </Carousel>
                    </WingBlank>
                </div>
                <div className='nav'>
                    {this.state.nav.map((item,index)=>{
                        return(
                            <div key={index} onClick={this.setPath.bind(this,'/home/classify',item.cid)}>
                                <div>
                                    <img src={item.image} alt=""/>
                                </div>
                                <div>
                                    {item.title}
                                </div>
                            </div>
                        )
                    })}
                </div>
                <div className='goods'>
                    {this.state.goods.map((item,index)=>{
                        return(
                            <div key={index} className={'goods'+index}>
                                <div className='title'>———{item.title}———</div>
                                    {item.items.map((item2,index2)=>{
                                        return(
                                            <div className='goods-item' key={index2}  onClick={this.setPath.bind(this,'/detail',item2.gid)}>
                                                <div className='goods-title'>
                                                    {item2.title}
                                                </div>
                                                <div className='goods-img'>
                                                    <img src={item2.image} alt=""/>
                                                </div>
                                            </div>
                                            )

                                    })}

                            </div>
                        )
                    })}
                </div>
                <div className='rec'>
                    <hr/>
                    <div className='rec-title'>
                        <img src="/images/home/index/recom.png" alt=""/>
                        <p>为您推荐</p>
                    </div>
                    <div className='rec-goods'>
                        {this.state.recom.map((item,index)=>{
                            return(
                                <div key={index}  onClick={this.setPath.bind(this,'/detail',item.gid)}>
                                    <div className='rec-img'>
                                        <img src={item.image} alt=""/>
                                    </div>
                                    <p>{item.title}</p>
                                    <div className='rec-price'>￥{item.price}</div>
                                </div>
                            )
                        })}
                    </div>
                </div>
            </div>
        )
    }
}

// export default withRouter(HomeComponents) ;

export default withRouter(
    connect((state)=>{
        return{
            state
        }
    })(HomeComponents)
)